<template>
  <div class="disclosure-page">
    <div
      class="panel-main"
      :class="[type == 'patent' && btnActive != 3 ? 'panel-patent' : '']"
    >
      <div class="btn-group">
        <button
          v-for="(item, index) in btnOption"
          :key="index"
          @click="changeBtn(index)"
          :class="{ active: btnActive === index }"
        >
          {{ item }}
        </button>
        <!-- 翻译 -->
        <div
          v-if="(btnActive === 1 || btnActive === 2) && type == 'patent' && false"
          class="translate-btn"
          @click="toggleTrans"
        >
          <img
            v-show="trans === 'yiwen'"
            src="@/assets/img/PS/translate-yi.png"
            alt=""
            ondragstart="return false"
          />
          <img
            v-show="trans === 'yuanwen'"
            src="@/assets/img/PS/translate-yuan.png"
            alt=""
            ondragstart="return false"
          />
        </div>
      </div>
      <div class="panel-main-box" :class="{ 'no-scrolly': btnActive === 3 }">
        <!-- 专利 -->
        <template v-if="type == 'patent'">
          <!-- 著录项信息 -->
          <description
            :publicInfo="publicInfo"
            :type="type"
            v-if="btnActive === 0"
          />
          <!-- 权利要求 -->
          <claim
            :publicInfo="publicInfo"
            :trans="trans"
            :btnActive="btnActive"
            v-show="btnActive === 1"
          />
          <!-- 说明书 -->
          <instructions
            :publicInfo="publicInfo"
            :trans="trans"
            :imgList="imgList"
            :btnActive="btnActive"
            v-show="btnActive === 2"
          />
          <!-- pdf全文 -->
          <pdf
            :publicInfo="publicInfo"
            :btnActive="btnActive"
            v-show="btnActive === 3"
          />
        </template>
        <!-- 文献 -->
        <template v-else-if="type == 'paper'">
          <!-- 题录信息 & 其他信息 -->
          <description
            :publicInfo="publicInfo"
            :type="type"
            :btnActive="btnActive"
          />
        </template>
        <!-- 标准 -->
        <template v-else-if="type == 'standard'">
          <!-- 题录信息 & 其他信息 -->
          <description
            :publicInfo="publicInfo"
            :type="type"
            :btnActive="btnActive"
          />
          <!-- pdf全文 -->
          <pdf
            :publicInfo="publicInfo"
            :btnActive="btnActive"
            v-show="btnActive === 1"
          />
        </template>
        <!-- 其他 -->
        <template v-else>
          <!-- 题录信息 & 其他信息 -->
          <description
            :publicInfo="publicInfo"
            :type="type"
            :btnActive="btnActive"
          />
        </template>
      </div>
    </div>

    <div class="panel-aside" v-if="type == 'patent' && btnActive !== 3">
      <div ref="imgWrap" class="img-wrap">
        <vue-scroll :ops="scrollOps">
          <div v-if="loading" class="img-loading">
            <i class="icon el-icon-loading"></i>
          </div>
          <div v-if="noImg && noImg !== ''" class="no-img">
            <img src="../../../../../../assets/img/no-img.png" alt="" />
          </div>
          <div v-for="(item, index) in imgList" :key="index" class="img-box">
            <el-image
              :src="item"
              :preview-src-list="imgList"
              fit="scale-down"
            ></el-image>
          </div>
        </vue-scroll>
      </div>
    </div>
  </div>
</template>

<script>
import Description from "./Description";
import Claim from "./Claim";
import Instructions from "./Instructions";
import Pdf from "./Pdf";
export default {
  props: {
    publicInfo: {
      type: Object,
    },
    type: {
      type: String,
    },
  },
  components: {
    Description,
    Claim,
    Instructions,
    Pdf,
  },
  data() {
    return {
      btnActive: 0,
      btnOption: [],
      imgList: [],
      noImg: false,
      loading: true,
      trans: "yuanwen",
      scrollOps: {},
    };
  },
  watch: {
    publicInfo() {
      this.init();
      this.getImgWrap();
    },
  },
  mounted() {
    if (Object.keys(this.publicInfo).length > 0) {
      this.init();
      this.getImgWrap();
    }
  },
  methods: {
    init() {
      if (this.type == "patent") {
        this.btnOption = ["著录项信息", "权利要求", "说明书", "PDF"];
      } else if (this.type == "paper") {
        // this.btnOption = ['题录信息', '其他信息',]
        this.btnOption = ["题录信息"];
      } else if (this.type == "standard") {
        this.btnOption = ["著录项信息", "PDF"];
      }
    },
    getImgWrap() {
      if (!this.publicInfo.pn) {
        return;
      }
      this.$post(this.$Url.show.imglist, {
        pns: [this.publicInfo.pn],
      })
        .then((res) => {
          this.loading = false;
          let data = res.data;
          if (data && data.length > 0) {
            let newUrl = [];
            let imgsValues =
              (data[0].imgs && Object.values(data[0].imgs)) || [];
            let promiseList = [];
            if (imgsValues.length <= 0) {
              this.noImg = true;
            } else {
              this.noImg = false;
            }

            imgsValues.forEach((v, j) => {
              let promise = new Promise((resolve) => {
                newUrl.push("");
                this.$post(
                  this.$Url.show.showPic,
                  {
                    pn: v,
                  },
                  {
                    responseType: "blob",
                  }
                ).then((res) => {
                  let blob = new Blob([res]);
                  let url = window.URL.createObjectURL(blob);
                  newUrl[j] = url;
                  resolve("success");
                });
              });
              promiseList.push(promise);
            });
            Promise.all(promiseList).then(() => {
              this.imgList = newUrl;
            });
          }
        })
        .catch((err) => {});
    },
    changeBtn(index) {
      this.btnActive = index;
    },
    toggleTrans() {
      if (this.trans === "yiwen") {
        this.trans = "yuanwen";
      } else {
        this.trans = "yiwen";
      }
    },
  },

  beforeMount() {
    this.scrollOps = {
      vuescroll: {
        mode: "native",
        sizeStrategy: "number",
        detectResize: true,
        wheelScrollDuration: 200,
      },
      scrollPanel: {
        initialScrollX: false,
        initialScrollY: false,
        scrollingX: false,
        scrollingY: true,
        speed: 1000,
      },
      rail: {
        size: "6px",
        // gutterOfEnds: '10px',
        gutterOfSide: "10px",
        keepShow: true,
      },
      bar: {
        onlyShowBarOnScroll: false,
        keepShow: true,
        background: "#adc2ca",
        size: "6px",
      },
    };
  },
};
</script>

<style lang="scss" scoped>
.disclosure-page {
  position: relative;
  // height: calc(100% - 40px);
  padding-bottom: 20px;
  display: flex;
  height: 100%;
  .panel-main {
    width: 100%;
    height: 100%;
    // padding-right: 280px;
    padding-right: 20px;
    box-sizing: border-box;
    margin-left: 20px;
    .btn-group {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      button {
        height: 40px;
        padding: 0 30px;
        border: 1px solid $color141;
        border-radius: 3px;
        margin-right: 20px;
        font-size: 12px;
        color: $mainColor;
        cursor: pointer;
        background-color: #fff;
        &.active {
          border-color: $mainColor;
          color: $color51;
          background-color: $mainColor;
          &:hover {
            opacity: 0.9;
          }
        }
      }
      .translate-btn {
        position: relative;
        display: inline-block;
        width: 40px;
        height: 40px;
        margin-left: 10px;
        cursor: pointer;
        img {
          display: block;
          // width: 100%;
          height: 100%;
        }
      }
    }
    .panel-main-box {
      position: relative;
      height: calc(100% - 20px);
      // height: calc(100% - );
      // height: 100%;
      // max-height: calc(100vh);
      overflow-y: auto;
      &.no-scrolly {
        overflow-y: initial;
      }
    }
  }
  .panel-patent {
    width: calc(100% - 2.4rem);
  }
  .panel-aside {
    position: absolute;
    top: 0;
    right: 0;
    width: 2.4rem;
    height: 100%;
    margin-right: 20px;
    text-align: center;
    // overflow-y:scroll ;
    .img-wrap {
      display: flex;
      flex-wrap: wrap;
      justify-content: center;
      width: 100%;
      height: 100%;
      box-sizing: border-box;
      .img-box {
        display: flex;
        align-items: center;
        justify-content: center;
        width: 180px;
        // height: 180px;
        margin-left: 0px;
        margin-bottom: 20px;
        img {
          width: 1.8rem;
          display: block;
        }
        .icon {
          display: inline-block;
          font-size: 30px;
          color: $color63;
        }
      }
      .no-img {
        width: 180px;
        height: 180px;
        img {
          width: 100%;
          height: 100%;
        }
      }
    }
  }
}
</style>